<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生实现Ajax-原理</title>
 <style type="text/css" media="screen">
 
 </style>
</head>

<body>

<script>

      //一. ajax(异步无刷新请求网页)原理-！！！注意服务器运行ajax
/*    1.实例化xhr异步对象  var xhr=new XMLHttpRequest()
     2.建立请求连接 xhr.open('get','url地址',true) //请求类型 get ,post 路径:url地址
     3.发送请求 xhr.send() 发送
     4.发送是否成功  xhr.onreadystatechange=function(){if(xhr.readyState==4){ //有没有发送成功: http请求状态 :0,1,2,3,4 
     	    if(xhr.status==200) //服务器响应状态: 200<=xhr.status<300||xhr.status=304 代表成功  
     	    {
     	    	//请求成功后做的事：响应内容
     	    	//console.log(xhr.responseText);
     	    }
     	    else
             {
                 //请求失败做的事:给你一个状态
                 // console.log(xhr.status);
             }

     }} */

      
    // 二.简单ajax实现
      var xhr=new XMLHttpRequest()
       console.log(xhr);
       xhr.open('get','abc.txt',true) //get 与post区别：get参数会在url地址显示,post不会，post提交敏感数据，登录
       xhr.send()
       //通过事件监听是否发送成功
       xhr.onreadystatechange=function(){
           //是否发送成功,http有4个状态码 0-4，4代表发送成功
           if(xhr.readyState==4){
               //200代表后台响应成功
               if(xhr.status==200){
                    //拿数据
                   console.log(44,xhr.responseText)
               }
               //如果没有成功,就获取错误状态码
               else{
                   console.log(xhr.status);
               }
           }
       } 

   //3.简单封装下-仿jq中$.ajax({url:url,method:get/post,data:{},success:function(){},error:function()}})
     //调用ajax('url地址',成功方法,失败方法)
        // ajax('abc.txt',function(data){
        //         console.log(data) //data后台数据
        // },function(status){
        //     console.log(status) //status失败状态
        // })  

    //封装实现-回调函数怎么写
  /*   function ajax(url,fnSucc,fnErr){
        var xhr=new XMLHttpRequest()
       console.log(xhr);
       xhr.open('get',url,true) //get 与post区别：get参数会在url地址显示,post不会，post提交敏感数据，登录
       xhr.send()
       //通过事件监听是否发送成功
       xhr.onreadystatechange=function(){
           //是否发送成功,http有4个状态码 0-4，4代表发送成功
           if(xhr.readyState==4){
               //200代表后台响应成功
               if(xhr.status==200){
                    //拿数据
                   console.log(44,xhr.responseText)
                   fnSucc(xhr.responseText) //形参函数
               }
               //如果没有成功,就获取错误状态码
               else{
                   console.log(xhr.status);
                   if(fnErr){
                      fnErr(xhr.status)
                   }
                   //简写
                //    fnErr&&fnErr(xhr.status)
               }
           }
       }

    }
    //实参函数调用-回调函数-回头用到的时候调用
   ajax('abc.txt',function(res){
       console.log(88,res);
   },function(err){
       console.log(95,err);
   }) */
   
// 扩展阅读-ajax更多封装-https://www.cnblogs.com/webSong/p/7224546.html

</script>
</body>
</html>
